@base-font-size: 1rem;

@grey: #5f5f5f;
@white: #fff;
@bordercolor: #f1f3f7;
@textcolor: #cccccc;
@primary: #007bff;
@secondary: #6c757d;
@success: #6c757d;
@danger: #dc3545;
@warning: #ffc107;
@info: #17a2b8;
@light: #f8f9fa;
@dark: #343a40;
@muted: #6c757d;

@colors: {
    grey: @grey;
    white: @white;
    bordercolor: @bordercolor;
    textcolor: @textcolor;
    primary: @primary;
    secondary: @secondary;
    success: @success;
    danger: @danger;
    warning: @warning;
    info: @info;
    light: @light;
    dark: @dark;
    muted: @muted;
}

@font-sizes: {
    xs: 0.8571;
    //12px
    sm: 0.9286;
    //13px
    md: 1;
    //14px
    lg: 1.0714;
    //15px
    xl: 1.1429;
    //16px
    xxl: 1.2143;
    //17px
    xxxl: 1.2857;
    //18px
    xxxxl: 1.5;
    //21px
}

@flex-jc: {
    start: flex-start;
    end: flex-end;
    center: center;
    between: space-between;
    around: space-around;
}

@flex-ai: {
    start: flex-start;
    end: flex-end;
    center: center;
    stretch: stretch;
}

@text-types: {
    l: left;
    center: center;
    r: right;
}

@spacing-types: {
    m: margin;
    p: padding;
}

@spacing-directions: {
    t: top;
    r: right;
    b: bottom;
    l: left;
}

@position-types: {
    absolute: absolute;
    fixed: fixed;
    relative: relative;
}

@spacing-base-size: 1rem;

@spacing-sizes: {
    0: 0;
    1: 0.15;
    2: 0.35;
    3: 0.5;
    4: 0.714;
    5: 1;
    6: 1.5;
    7: 1.8;
    8: 2.14;
    9: 3;
    10: 4.5;
    11: 6;
}

@base-row : 100 / 12%;

@row : {
    1: 1* @base-row;
    2: 2* @base-row;
    3: 3* @base-row;
    4: 4* @base-row;
    5: 5* @base-row;
    6: 6* @base-row;
    7: 7* @base-row;
    8: 8* @base-row;
    9: 9* @base-row;
    10: 10* @base-row;
    11: 11* @base-row;
    12: 12* @base-row;
}